<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"><</text>
		  <text class="tabtext">请假审批</text>
		</view>
    
    <!-- Listconter内容区 -->
    <view class="contentList">
      <view class="List">
        <!-- 头像顶部 -->
        <view class="Listtop">
          <view class="userimg">
            <image src="../Allcourses/img/zhouliu.png" mode=""></image>
            <text>范冰冰的请假</text>
          </view>
          <view class="userright">
            <text class="daishenhe">·</text>
            <text class="daishenhe">待通过</text>
          </view>
        </view>
        <!-- 底部时间 -->
        <view class="Listbottom">
          <view>
            <text>开始时间：2020-04-20 15:00</text>           
          </view>
          <view>
            <text>结束时间：2020-04-22 15:00</text>
          </view>
          <view class="qjyy">
            <text>请假原因：生病</text>
            <text>2020-05-27</text>
          </view>
        </view>
      </view>
      
      
      <button type="default" class="btnqj">发起请假</button>
    </view>
    
    
    <!-- 底部tabr -->
    <view class="tabr">
      <li>
        <image src="./img/buka.png" mode=""></image>
        <view >
          补卡
        </view>
      </li>
     <li>
       <image src="./img/qingjia.png" mode=""></image>
       <view >
         请假
       </view>
     </li>
        
     
      
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
  
</script>

<style>
/* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
 background: url(../img/tabbar.png) no-repeat;
 background-size: cover;
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 50rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

 margin-left: 222rpx;
}
/* 内容区 */
.List {
  width: 690rpx;
  height: 312rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.16);
  border-radius: 20rpx;
  margin: 15rpx 30rpx;
 
 }
 .Listtop {
   display: flex;
   height: 130rpx;
   border-bottom: 1px solid #F5F5F5;
   padding-left: 47rpx;
 }
 .Listtop image {
   width: 90rpx;
   height: 90rpx;
   border-radius: 50%;
   vertical-align: middle;
   margin-top: 20rpx;
 }
.userimg {
  display: flex;
  justify-content: center;
  align-items: center;
}
.userimg text {
  margin-top: 28rpx;
  padding-left: 28rpx;
 
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 40rpx;

}
.userright {
  display: ;
  margin-top: 37rpx;
  margin-left: 242rpx;
  text-align: center;
  
}
.userright text:nth-child(1) {
 font-size: 40rpx;
  border-radius: 50%; 
}
.userright text:nth-child(2) {
  width: 95rpx;
  height: 30rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  
 padding-left: 13rpx;
}
/* 待审核颜色 */
.daishenhe {
  color: #FFAF0F;
}
/* 已通过颜色 */
.yitongguo {
  color: #8DCE2A;
}
/* 内容底部 */
.Listbottom {
  margin-left: 47rpx;
}
.Listbottom view {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #777777;
  line-height: 40rpx;
  padding-top: 20rpx;
}
.qjyy {
   display: flex;
   justify-content: space-between;
  }
  .qjyy text:nth-child(2) {
    padding-right: 25rpx;
  }
  .btnqj {
    width: 500rpx;
    height: 90rpx;
    background: linear-gradient(90deg, #D2F79A 0%, #8DCE2A 100%);
    border-radius: 40rpx;
    margin-top: 90rpx;
    font-size: 32rpx;
    font-family: PingFang;
    font-weight: bold;
    color: #FFFFFF;
    }

/* 底部tabbr */
.tabr {
  position: fixed;
  bottom: 0px;
 width: 750rpx;
 height: 98rpx;
 background: #FFFFFF;
 box-shadow: 0px 3px 76px 0px rgba(192, 192, 192, 0.33);

}
.tabr {
  display: flex;
  
}
.tabr li {
 padding-top: 12rpx;
  flex: 1;
  text-align: center;
}
.tabr image {
  
  width: 40rpx;
  height: 40rpx;
 
}
.tabr view {
 
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #777777;
 

}

</style>
